<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Text Editor with Image Insert</title>
    <!-- 导入 Quill 样式和脚本 -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/quill.snow.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/comm.css"/>
    <link rel="stylesheet" href="../css/add.css"/>
</head>
<body>
    <header>
        <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
    </header>
    
    <div id="app">  
        <div id="suggestion">  
            <textarea placeholder="请输入您的建议" v-model="editor" style="width: 100%; height: 400px;"></textarea>  
        </div>  
        <button type="button" class="btn btn-primary add" @click="submitSuggestion">提交建议</button>  

        <!-- 以下是新增的建议列表部分 -->
        <div class="mt-3" v-if="auth==1">
            <h3>建议列表：</h3>
            <ul class="list-group">
                <li class="list-group-item" v-for="(suggest, index) in suggests" :key="suggest.id">
                    <p>{{ suggest.content }}</p>
                    <small class="text-muted">创建时间: {{ suggest.create_time }}</small>
                </li>
            </ul>
        </div>
    </div>

    <script src="../js/quill.js"></script>

    <script>  
        new Vue({  
            el: "#app",  
            data: {  
                editor: null, // 富文本编辑器实例  
                suggests:[
                    {
                        "content": "啥也不是",
                        "create_time": "2024-04-14 18:14:36",
                        "id": 1,
                        "user_id": "admin"
                    },
                    {
                        "content": "啥也不是2",
                        "create_time": "2024-04-14 18:14:36",
                        "id": 1,
                        "user_id": "admin"
                    }
                ], // 建议的内容  
                auth:""
            },  
            created(){
                this.auth = sessionStorage.getItem("auth");
                this.getList()
            },
            methods: { 
            //添加建议
            async submitSuggestion(){
                 // 登录的json数据
                 const jsonData = {
                    "userId":sessionStorage.getItem("id"),
                    "content":this.editor
                }
                const response = await fetch('http://localhost:5000/suggest/add',{
                    method: 'POST', // 指定请求方法为POST  
                    headers: {  
                        'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                    }, 
                    body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                });
                 // post
                 const data =await response.json()
                 if(data.code==200){
                    alert("感谢您的建议")
                    this.editor=""
                 }
            },
            
            // 查询方法
            async getList(){
                if(this.auth==1){
                    try {
                                // 使用fetch发起GET请求
                                const response = await fetch('http://localhost:5000/suggest/list');
                                const data = await response.json();
                                // 请求成功时更新数据
                                this.suggests = data.data
                            } catch (error) {
                                // 请求失败时处理错误
                                console.error('Error fetching data:', error);
                                    
                        }
                    }
                },
            },  
        });  
    </script>
</body>
</html>
